<template>
  <!-- '我的课程-考试列表-试题审批列表 -->
  <div id="t-item-bank" class="jx-content">
    <div class="search-box fl">
      <el-form :inline="true" ref="searchForm" label-width="80px">
        <el-form-item label="学生信息">
          <el-input v-model="reqData.userInfo" placeholder="请输入学号或姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <div @click="getList" class="button-style">搜 索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
          <el-button
            @click="downLoadsGui"
            class="button-style"
            style="font-weight: normal"
            :loading="loadingGui"
            >{{ loadingGui ? "归档生成中" : "归档下载" }}</el-button
          >
          <el-button
            @click="downLoads"
            class="button-style"
            style="font-weight: normal; margin-left: 0px"
            :loading="loading"
            >{{ loading ? "成绩生成中" : "成绩下载" }}</el-button
          >
          <div @click="refreshList" class="button-style">刷新</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="clear"></div>
    <div v-if="resData">
      <el-table :data="resData.content" style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="studentName" label="学生姓名"></el-table-column>
        <el-table-column prop="studentNumber" label="学号"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
        <el-table-column prop="grade" label="年级"></el-table-column>
        <el-table-column prop="score" label="得分"></el-table-column>
        <el-table-column prop="statusMessage" label="状态"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="table-button">
              <router-link
                target="_blank"
                @click.native="markingPage(scope.row)"
                :to="{
                  path: '/TeacherMarking',
                  query: { paperId: $route.query.paperId },
                }"
              >
                <span v-if="scope.row.paperStatus === 3">审批</span>
                <span v-if="scope.row.paperStatus === 4">修改</span>
              </router-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="resData.pageNum"
      :page-size="resData.pageSize"
      :total="resData.total"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      resData: [],
      reqData: {
        userInfo: "",
        pageNum: 1,
        pageSize: 10,
      },
      currentPage: 10,
      loading: false,
      loadingGui: false,
      timer: null,
    };
  },
  mounted() {
    this.init();
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    init() {
      this.getList();
    },
    downLoadsGui() {
      let self = this;
      let paperId = self.$route.query.paperId;
      let courseId = self.$localstorage.getLocalStorage("setCourseId");
      this.loadingGui = true;
      const loading = this.$loading({
        lock: true,
        text: "归档生成中，请不要关闭页面！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      axios
        .get(`/tes/course/${courseId}/course-test/paper/${paperId}/student/download?userInfo=${self.reqData.userInfo}`)
        .then((response) => {
          console.log(response, 1234);
          const { code, message, data } = response.data;
          if (code != 200) {
            this.loadingGui = false;
            self.$message.error(message);
          } else {
            if (data) {
              window.location.href = data;
              this.loadingGui = false;
            }
          }
          loading.close();
        })
        .catch((err) => {
          this.loadingGui = false;
          console.log(err);
          loading.close();
        });
    },
    //下载
    downLoads() {
      let self = this;
      let paperId = self.$route.query.paperId;
      let courseId = self.$localstorage.getLocalStorage("setCourseId");
      this.loading = true;

      this.timer = setInterval(() => {
        axios
          .post(
            `/tes/course/${courseId}/course-test/paper/${paperId}/student/export`,
            {
              userInfo: self.reqData.userInfo,
            }
            // { responseType: "blob" }
          )
          .then((response) => {
            // clearInterval(this.timer);
            console.log(response, 1234);
            const { code, message, data } = response.data;

            if (code != 200) {
              this.loading = false;
              clearInterval(this.timer);
              self.$message.error(message);
            } else {
              if (data) {
                clearInterval(this.timer);
                window.location.href = data;
                this.loading = false;
              }
            }
            // let contentType = response.headers["content-type"];
            // //console.log(contentType);
            // //console.log(response.headers["code-message"]);
            // if (contentType == "application/json;charset=UTF-8") {
            //     self.$message.error(response.headers["code-message"]);
            // } else {
            //     let blob = new Blob([response.data], {
            //     type: response.headers["content-disposition"]
            //     });
            //     let fileName = "成绩列表.xls";
            //     let url = window.URL.createObjectURL(blob);
            //     let downloadElement = document.createElement("a");
            //     downloadElement.style.display = "none";
            //     downloadElement.href = url;
            //     downloadElement.download = fileName; //下载后文件名
            //     document.body.appendChild(downloadElement);
            //     downloadElement.click(); //点击下载
            //     document.body.removeChild(downloadElement); //下载完成移除元素
            // }
          })
          .catch((err) => {
            this.loading = false;
            console.log(err);
          });
      }, 2000);
    },
    //审批 存储answerSheetId
    markingPage(row) {
      //answerSheetId:scope.row.id
      let localStorage = window.localStorage;
      localStorage.setItem("answerSheetId", row.id);
    },
    //获取table列表
    getList() {
      let self = this;
      //接收试卷id
      let paperId = self.$route.query.paperId;
      return new Promise((resolve, reject) => {
        axios
          .get(
            "/tes/course/" +
              this.$localstorage.getLocalStorage("setCourseId") +
              "/course-test/paper/" +
              paperId +
              "/student",
            { params: self.reqData }
          )
          .then(function (res) {
            if (res.status === 200) {
              if (res.data.code === 200) {
                self.resData = res.data.data;
                resolve(1);
              } else {
                self.$message({
                  message: res.data.message,
                  type: "error",
                });
              }
            }
          })
          .catch(function (err) {
            if (err.response) {
              console.log(err.response);
            }
          });
      });
    },
    //刷新
    async refreshList() {
      let flag = await this.getList();
      // console.log(a,11)
      if (flag) {
        this.$message.success("刷新成功");
      }
      //yx
      // let self = this;
      //接收试卷id
      // let paperId = self.$route.query.paperId;
      // axios
      //   .get(
      //     "/tes/course/" +
      //       this.$localstorage.getLocalStorage("setCourseId") +
      //       "/course-test/paper/" +
      //       paperId +
      //       "/student",
      //     { params: self.reqData }
      //   )
      //   .then(function(res) {
      //     if (res.status === 200) {
      //       if (res.data.code === 200) {
      //         self.resData = res.data.data;
      //         self.$message.success("刷新成功")
      //       } else {
      //         self.$message({
      //           message: res.data.message,
      //           type: "error"
      //         });

      //       }
      //     }
      //   })
      //   .catch(function(err) {
      //     if (err.response) {
      //       console.log(err.response);

      //     }
      //   });
    },
    handleSizeChange(a) {},
    handleCurrentChange(a) {
      this.reqData.pageNum = a;
      this.getList();
    },
  },
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#t-item-bank {
  width: 1200px;
  margin: 30px auto;
  .dialog-questions {
    .dialog-content {
      padding: 20px 64px 0;
      .question-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 20px;
      }
      .question-chose {
        font-size: 14px;
        line-height: 24px;
        padding: 6px 0;
        display: flex;
        .question-flex {
          flex: 1;
        }
      }
      .question-answer {
        font-size: 16px;
        .chose {
          font-size: 18px;
          color: #385899;
          vertical-align: -2px;
        }
        margin-top: 20px;
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .dialog-import-questions {
    .dialog-content {
      text-align: center;
      padding: 60px 0 40px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
  .progress-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .progress-line {
      flex: 1;
      margin-right: 10px;
    }
  }
}
</style>
